<template>
  <div>
    <div>
      <el-form :model="searchForm" inline>
        <el-form-item label="游戏名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入"
            maxlength="99"
            @change="handleSearch"
          />
        </el-form-item>
        <el-form-item label="游戏类型">
          <el-select v-model="searchForm.type" placeholder="请选择" @change="handleSearch">
            <el-option
              v-for="item in searchFormTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-radio-group v-model="searchForm.status" @change="handleSearch">
            <el-radio-button :label="-1">全部</el-radio-button>
            <el-radio-button :label="1">上架中</el-radio-button>
            <el-radio-button :label="2">下架中</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="游戏名称" />
      <el-table-column prop="type" label="游戏类型" />
      <el-table-column prop="status" label="上架状态" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <div>
      <el-pagination
        v-model:current-page="currentPage"
        layout="prev, pager, next"
        :total="pagerTotal"
        :default-page-size="currentPageSize"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { IGetGameListResponse, IGetGameListOption } from '@/service/api/gameManage/types'
import { getGameListApi } from '@/service/api/gameManage/api'
let tableData: IGetGameListResponse['list'] = reactive([])
const pagerTotal = ref(0)
const currentPage = ref(1)
const currentPageSize = ref(10)
const searchForm = reactive({
  name: '',
  type: -1,
  status: -1,
})
const searchFormTypeList = [
  {
    value: -1,
    label: '不限',
  },
  {
    value: 1,
    label: '射击',
  },
  {
    value: 2,
    label: 'RPG',
  },
  {
    value: 3,
    label: '模拟经营',
  },
]
onMounted(() => {
  handleSearch()
})
function getBookList(params: { page: number; pageSize: number }) {
  const option: IGetGameListOption = {
    page: params.page,
    page_size: params.pageSize,
  }
  if (searchForm.name) {
    option.name = searchForm.name
  }
  if (searchForm.type >= 0) {
    option.type = searchForm.type
  }
  if (searchForm.status >= 0) {
    option.status = searchForm.status
  }
  getGameListApi(option).then((res) => {
    if (res.data) {
      res.data = {
        list: [
          {
            id: 1,
            name: '游戏1',
            type: 1,
            status: 1,
            remark: '备注1',
          },
          {
            id: 2,
            name: '游戏2',
            type: 2,
            status: 2,
            remark: '备注2',
          },
          {
            id: 3,
            name: '游戏3',
            type: 3,
            status: 1,
            remark: '备注3',
          },
        ],
        total: 11,
        page: params.page,
        page_size: params.pageSize,
      }
      tableData = res.data.list
      pagerTotal.value = res.data.total
      currentPage.value = res.data.page
      currentPageSize.value = res.data.page_size
    }
  })
}
function handleSearch() {
  getBookList({
    page: 1,
    pageSize: currentPageSize.value,
  })
}
function handleRefresh() {
  getBookList({
    page: currentPage.value,
    pageSize: currentPageSize.value,
  })
}
function handlePageChange(n: number) {
  currentPage.value = n
  getBookList({
    page: n,
    pageSize: currentPageSize.value,
  })
}
function handlePageSizeChange(n: number) {
  currentPageSize.value = n
  getBookList({
    page: currentPage.value,
    pageSize: n,
  })
}
</script>
